<template>
	<view>
	 	<u-navbar :is-back="false" :back-icon="false" :border-bottom="false" placeholder :background="background">
			<view class="slot-wrap">
				<view class="d-flex align-items-center">
					<image class="earth-logo" src="../../static/home/earth-logo.png" mode="aspectFill"></image>
					<text class="fz-32 font-weight-600" :style="{'color':color}">POSTRINGS+</text>
				</view>
				<view class="search-wrap" @click="toSearch">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search disabled v-model.trim="keyword"  height="70" bg-color="#ffffff" border-color="#D8D9E1"
						:show-action="false"
						placeholder="输入您要找的内容" placeholder-color="#CED4DA"
						search-icon-color="#ADB5BD"></u-search>
				</view>
			</view>
		</u-navbar> 
		<view class="content-wrap" :style="{'--percent':top + 'px'}">
			<view class="swiper-wrap">
				<u-swiper :list="bannerList" height="530" border-radius="0" @click="toCard"></u-swiper>
			</view>
			<view class="content-container">
				<view class="notice-wrap d-flex align-items-center justify-content-between ">
					<view class="d-flex align-items-center" style="width: 87%;">
						<view class="notice-left-icon">
							<image src="/static/home/news.png"></image>
						</view>
						<view class="notice-left-line"></view>
						<u-notice-bar-2 mode="vertical" bg-color="#ffffff" color="#292940" style="padding-left: 0;"
							class="w-100 u-line-2" :volume-icon="false" :list="textList" @click="toArticlesDetail"></u-notice-bar-2>
					</view>
					<view class="d-flex align-items-center justify-content-right" @click="toMore">
						<image class="news-more" src="/static/home//news-more.png"></image>
					</view>
				</view>
				<view class="invite-banner position-relative" @click="toInvite">
					<image src="/static/home/hone-Invite-friends.png"></image>
				</view>
			</view>
			<view class="creation-tab">
				<u-tabs :list="categoryList" :bar-style="barStyle" :active-item-style="activeStyle" :gutter="gutter"
					:bold="true" active-color="#292940" inactive-color="#292940" bar-width="36" height="90" bar-height="8"
					v-model="current" @change="change"></u-tabs>
			</view>
			<view class="padding-wrap" v-if="current == 0">
				<view class="creation-box d-flex justify-content-between">
					<view class="creation-item" v-for="item in hotWorksList" @click="toDetail(item)">
						<view class="position-relative" >
							<view class="creation-cover" >
								<image :src="item.file" mode="aspectFill" v-if="item.type == 1"></image>
								<image :src="item.cover" mode="aspectFill" v-else></image>
							</view>
							<template v-if="isYou(item.sell_time)">
								<view class="sell-over-bg sell-time-bg d-flex justify-content-center align-items-center position-absolute">
									<view class="sell-over">
										<image src="/static/home/sell-over-home.png"></image>
									</view>
									<view class="fz-22 text-ffffff">限时抢购</view>
								</view>
							</template>
							<template v-else>
								<view class="sell-over-bg d-flex justify-content-center align-items-center position-absolute" >
									<view class="sell-over">
										<image src="/static/home/sell-over-home1.png"></image>
									</view>
									<view class="fz-22 text-CCCDD6">已售罄</view>
								</view>
							</template>
							<view class="position-absolute creation-quantity">
								<view class="d-flex justify-content-center align-items-center">
									<span class="text-CCCDD5 fz-24">发行:</span>
									<span class="text-00D7FF fz-28 font-DIN">{{tui.filterCount(item.count)}}</span>
									<span class="line"></span>
									<span class="text-CCCDD5 fz-24">流通:</span>
									<span class="text-00D7FF fz-28 font-DIN">{{tui.filterCount(item.sell_user_works_count)}}</span>
								</view>
							</view>
						</view>
						<view class="creation-item-title creation-item-padding line-h-1em text-292940 fz-30">{{item.name}}
						</view>
						<view class="text-292940 creation-item-padding creation-item-price" v-if="item.sell_user_works_count > 0">
							<span class="fz-30 font-DIN">￥</span>
							<span class="fz-48 font-DIN">{{item.min_price}}</span>
							<span class="fz-28 pl-1">起</span>
						</view>
						<view class="text-292940 creation-item-padding creation-item-price" v-else>
							<span class="fz-30 font-DIN">￥</span>
							<span class="fz-48 font-DIN" v-if="item.last_order">{{item.last_order.price}}</span>
							<span class="fz-48 font-DIN" v-else>1.0</span>
							<span class="fz-28 pl-1">起</span>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" v-show="loadingWorkShow" style="margin:0 auto" margin-top="50"/>
				<view class="no-works" v-show="worksTotal === 0 && !loadingWorkShow">
					<image src="../../static/market/no-works.png" mode="aspectFill"></image>
					<view style="color: #b5b5b5;">空空如也~</view>
				</view>
			</view>
			<view class="padding-wrap" v-if="current == 1">
				<view class="creation-box d-flex justify-content-between">
					<view class="creation-item isBigView" v-for="item in boxList" @click="toBoxDetail(item)">
						<view class="position-relative" >
							<view class="creation-cover" >
								<image :src="item.cover_url" mode="aspectFill"></image>
							</view>
						</view>
						<view class="creation-item-title creation-item-padding line-h-1em text-292940 fz-30">{{item.name}}
						</view>
						<view class="text-292940 creation-item-padding creation-item-price">
							<span class="fz-30 font-DIN">￥</span>
							<span class="fz-48 font-DIN">{{item.min_price}}</span>
							<span class="fz-28 pl-1">起</span>
						</view>
					</view>
				<!-- 	<u-loadmore :status="boxStatus" v-show="boxLoading" style="margin:0 auto"  margin-top="50"/> -->
					<view class="no-works" v-show="boxTotal === 0 && !boxLoading">
						<image src="../../static/market/no-works.png" mode="aspectFill"></image>
						<view style="color: #b5b5b5;">空空如也~</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="downbox" v-if="isAndroid">
			<view class="text-292940 fz-30" @click="openApp">打开POSTRINGS+ APP</view>
		</view>
		<!-- #endif -->
		<u-modal v-model="modalShow" @confirm="confirm" content="此藏品已售完，前往市场看看?" show-cancel-button confirm-color="#00C0FF"></u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				modalShow:false,
				show: false,
				keyword: '',
				bannerList:[
					'/static/home/banner1.png','/static/home/banner2.png'
				],
			//	artList:[],
			
				// textList: [
				// 	{title:'一段标题一',id:1},{title:'标题二',id:3},{title:'标题三',id:2}
				// ],
				textList: [
					'一段标题一','标题二','标题三'
				],
				loadingWorkShow:false,
				worksTotal:'',
				worksPage:1,
				//hotWorksList:[],
				hotWorksList:[
					{file:'',sell_time:888899999993244,type:2,cover:'/static/home/cover1.png',file:'' ,count:200,sell_user_works_count:113,name:'音乐骷髅系列',min_price:39.9 ,min_price_work:{price:29.9} },
					{file:'',sell_time:888888888884556,type:1,cover:'/static/home/cover1.png', file:'/static/home/cover1.png' ,count:200,sell_user_works_count:123 ,name:'音乐骷髅系列',min_price:19.9,min_price_work:{price:29.9}  },
					{file:'',sell_time:8888854555,type:2,cover:'/static/home/cover1.png', file:'' ,count:200,sell_user_works_count:123,name:'音乐骷髅系列之1',min_price:19.9,min_price_work:{price:29.9}  },
					{file:'',sell_time:888855555528896,type:2,cover:'/static/home/cover1.png',file:'' ,count:200,sell_user_works_count:123,name:'音乐骷髅系列之。。。',min_price:39.9  }
				],
				
				
				status:'loading',
				checkUpdateCount:0,
				background: {
					backgroundColor: 'rgba(255,255,255,0)'
				},
				color: 'rgba(255,255,255,1)',
				scroll:0,
				bgOpcity:0,
				isOpcity: 1,
				scrollH: 0,
				opcity:0,
				rankList: [{name:'优先购'},{name:'未开始'}],
				rankIndex:0,
				boxPage:1,
				//boxList:[],
				boxList:[
					{cover_url:'/static/home/cover1.png',sell_time:true,file:'' ,count:200,sell_user_works_count:113,name:'音乐骷髅系列',min_price:39.9,min_price_work:{price:29.9} },
					{cover_url:'/static/home/cover1.png',sell_time:true, file:'/static/home/cover1.png' ,count:200,sell_user_works_count:123 ,name:'音乐骷髅系列',min_price:19.9,min_price_work:{price:29.9} },
					{cover_url:'/static/home/cover1.png',sell_time:true, file:'' ,count:200,sell_user_works_count:123,name:'音乐骷髅系列之1',min_price:19.9 ,min_price_work:{price:29.9}},
					{cover_url:'/static/home/cover1.png',sell_time:true, file:'' ,count:200,sell_user_works_count:123,name:'音乐骷髅系列之。。。',min_price:39.9 ,min_price_work:{price:29.9} }
				
				],
				boxStatus:'loading',
				boxTotal:'',
				ingPage:1,
				ingTotal:'',
				ingList:[],
				notPage:1,
				notTotal:'',
				notList:[],
				ingLoading:true,
				notLoading:true,
				boxLoading:true,
				categoryList:[
					{name: '首发藏品'},{name: '盲盒'}
				],
				barStyle: {
					background: 'linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%)',
					borderRadius: '3px',
				},
				activeStyle: {
					fontWeight: 600,
					fontSize: '34upx',
				},
				gutter: 30,
				current:0,
				isAndroid:false
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop;
			this.scroll = scrollTop
			let opcity = this.scroll / this.scrollH * 10;
			let opcityCount = ((this.scroll / this.scrollH) * 10).toFixed(1)
			if (opcity >= 1 && this.opcity >= 1) {
				opcity = 1
			}
			if (opcityCount >= 1) {
				opcityCount = 1
			}
			let opcityCountColor = opcityCount * 0.8
			let colorCount = Math.ceil((1 - opcityCount) * 255)
			this.bgOpcity = opcity;
			this.isOpcity = 1 - opcity
			this.color = `rgba(${colorCount}, ${colorCount}, ${colorCount},1)`
			this.background.backgroundColor = 'rgba(255,255,255,' + this.bgOpcity + ')'
			
		},
		onReady() {
			// #ifdef APP-PLUS
			this.checkUpdate()
			// #endif
		},
		onLoad() {
			let platform = uni.getSystemInfoSync().platform
			if(platform == 'android'){
				this.isAndroid = true
			}
			this.top = this.tui.navBarHeight + 44
			//轮播本地缓存
			//this.bannerList = uni.getStorageSync('banner') || []
			//资讯本地缓存
		//	this.artList = uni.getStorageSync('artList') || []
			//文章
		//	this.getArticlesList()
			//轮播
			//this.getBanner()
			//热门作品
			//this.getWorksHot()
			//优先购列表
			// this.getPreIngList()
			//优先购列表
			// this.getPreNotList()
			//盲盒列表
		//	this.getBoxList()
			setTimeout(()=>{
				uni.getSystemInfo({
					success: (res) => {
						this.scrollH = res.windowWidth
					}
				})
			},30)
		},
		onPullDownRefresh() {
			//文章
			//this.getArticlesList()
			//轮播
			this.getBanner()
			//热门作品
			//this.getWorksHot(1)
			//优先购列表
			// this.getPreIngList(1)
			//优先购列表
			// this.getPreNotList(1)
			//盲盒列表
		//	this.getBoxList(1)
		},
		computed:{
			USER(){
				return this.$store.state.auth.USER
			}
		},
		onReachBottom() {
			if(this.current == 0){
				if(this.hotWorksList.length < this.worksTotal){
					this.worksPage ++
					this.getWorksHot()
				}
			}else{
				if(this.boxList.length < this.boxTotal){
					this.boxPage++
					this.getBoxList()
				}
			}
		},
		methods:{
			openApp(){
				let href = `POSTRINGSPLUS://`
				if(this.isAndroid){
					window.location.href = href;
				}
				setTimeout(() => {
					uni.navigateTo({
						url:'/pages/login/download'
					})
				}, 1500)
			},
			//去市场看看
			confirm(){
				uni.switchTab({
					url:'/pages/tabBars/market'
				})
			},
			//进行中结束则剔除出队列
			ingEnd(index){
				this.ingList.splice(index,1)
			},
			//未开始结束，则添加到进行中队列
			notEnd(index,item){
				this.ingList.unshift(item)
				this.notList.splice(index,1)
			},
			//优先购物加载下一页(已开始)
			loadPreIng(){
				if(this.ingList.length < this.ingTotal && this.ingLoading){
					this.ingPage++
					this.getPreIngList()
				}
			},
			//优先购物加载下一页(未开始)
			loadPreNot(){
				if(this.notList.length < this.notTotal && this.notLoading){
					this.notPage++
					this.getPreNotList()
				}
			},
			//盲盒加载下一页
			loadBox(){
				if(this.boxList.length < this.boxTotal && this.boxLoading){
					this.boxPage++
					this.getBoxList()
				}
			},
			//获取优先购列表(进行中)
			getPreIngList(val){
				if(this.ingLoading || val == 1){
					if(val == 1){
						this.ingPage = 1
						this.ingTotal = ''
					}
					this.ingLoading = false
					this.$store.dispatch('works/preList',{page:this.ingPage,status:1}).then(res=>{
						this.ingLoading = true
						this.ingTotal = res.data.total
						if(this.ingPage == 1){
							this.ingList = res.data.data
						}else{
							this.ingList = [...this.ingList, ...res.data.data]
						}
					}).catch(error=>{
						this.ingLoading = true
					})
				}
			},
			//获取优先购列表(未开始)
			getPreNotList(val){
				if(this.notLoading || val == 1){
					if(val == 1){
						this.notPage = 1
						this.notTotal = ''
					}
					this.notLoading = false
					this.$store.dispatch('works/preList',{page:this.notPage,status:2}).then(res=>{
						this.notLoading = false
						this.notTotal = res.data.total
						if(this.notPage == 1){
							this.notList = res.data.data
						}else{
							this.notList = [...this.notList, ...res.data.data]
						}
					}).catch(error=>{
						this.notLoading = true
					})
				}
			},
			// //获取盲盒列表
			// getBoxList(val){
			// 	if(this.boxLoading || val == 1){
			// 		if (val == 1) {
			// 			this.boxPage = 1
			// 			this.boxTotal = ''
			// 		}
			// 		this.boxLoading = false
			// 		this.$store.dispatch('works/boxMarket', { page: this.boxPage}).then(res => {
			// 			this.boxLoading = true
			// 			this.boxTotal = res.data.total
			// 			if(this.boxPage == 1){
			// 				this.boxList = res.data.data
			// 			}else{
			// 				this.boxList = [...this.boxList, ...res.data.data]
			// 			}
			// 		}).catch(error=>{
			// 			this.boxLoading = true
			// 		})
			// 	}
			// },
		//	获取盲盒列表
			getBoxList(val){
				if(val == 1){
					this.boxTotal = ''
					this.boxPage = 1
					this.boxList = []
				}
				this.boxLoading = true
				this.boxStatus = 'loading'
				this.$store.dispatch('works/boxMarket', { page: this.boxPage}).then(res => {
					this.boxTotal = res.data.total
					this.boxList = [...this.boxList, ...res.data.data]
					if (this.boxTotal == this.boxList.length && this.boxList.length > 2) {
						this.boxStatus = 'nomore'
					} else {
						this.boxLoading = false
					}
				}).catch(error=>{
					this.boxLoading = false
				})
			},
			//获取热门作品
			getWorksHot(val) {
				if(val == 1){
					this.worksTotal = ''
					this.worksPage = 1
					this.hotWorksList = []
				}
				this.loadingWorkShow = true
				this.status = 'loading'
				this.$store.dispatch('works/searchWorks', { page: this.worksPage,top:1}).then(res => {
					console.log(res)
					uni.stopPullDownRefresh()
					this.worksTotal = res.data.total
					this.hotWorksList = [...this.hotWorksList, ...res.data.data]
					if (this.worksTotal == this.hotWorksList.length && this.hotWorksList.length>2) {
						this.status = 'nomore'
					} else {
						this.loadingWorkShow = false
					}
				})
			},
			//轮播图列表
			getBanner() {
				this.$store.dispatch('public/advertisementsList', { type: 'banner' }).then(res => {
					let arr = []
					for (let i of res.data.data) {
						arr.push({
							image: this.tui.handleUrl(i.picture),
							path:i.path
						})
					}
					this.bannerList = arr
					console.log('this.bannerList',this.bannerList);
					uni.setStorageSync('banner',arr)
				})
			},
			//获取文章列表
			getArticlesList(){
				this.$store.dispatch('public/articlesList',{ type:'post'}).then(res=>{
					this.artList = res.data.data
					uni.setStorageSync('artList',this.artList)
					for (let i of res.data.data) {
						this.textList.push(i.title)
					}
				})
			},
			//跳转文章详情
			toArticlesDetail(index) {
				uni.navigateTo({
					url: '/pages/secondary/home/announcement-detail?id=' + this.artList[index].id
				})
			},
			//作品详情
			toDetail(item){
				console.log(this.isYou(item.sell_time))
				if(this.isYou(item.sell_time)){
					return this.toBid(item)
				}
				if(item.sell_user_works_count == 0){
					return this.modalShow = true
				}
				console.log(item)
				uni.navigateTo({
					url:`/pages/secondary/market/index?work_id=${JSON.stringify(item)}`
				})
			},
			//前往作者
			toAuthor(item){
				
				uni.navigateTo({
					url:`/pages/secondary/market/author?userInfo=${JSON.stringify(item)}`
				})
			},
			//前往搜索
			toSearch(){
				uni.navigateTo({
					url:'/pages/search/index'
				})
			},
			//更多
			toMore(){
				uni.navigateTo({
					url:'/pages/secondary/home/announcement'
				})
			},
			//盲盒详情
			toBoxDetail(item){
				uni.navigateTo({
					url:`/pages/secondary/market/Blind-box?box_id=${item.id}`
				})
			},
			toInvite(){
				if(this.USER){
					uni.navigateTo({
						url:'/pages/secondary/home/invite'
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			//新版检查更新
			checkUpdate() {
				//判断是否在APP和安卓默认下
				if (typeof(plus) != 'undefined' && plus.os.name == 'Android') {
					//旋转屏幕锁定
					plus.screen.lockOrientation('portrait-primary')
					this.$store.dispatch('public/version').then(res => {
						if (res.data == null) {
							return false
						}
						//根据接口最新版本号，对比系统版本判断是否有更新
						plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
							if (wgtinfo.versionCode * 1 < res.data.version) {
								uni.navigateTo({
									url: `/pages/secondary/home/popup?versinInfo=${JSON.stringify(res.data)}`
								})
							}
						})
					}).catch(error=>{
						this.checkUpdateCount ++
						if(this.checkUpdateCount < 4){
							this.checkUpdate()
						}
					})
				}
			},
			change(index) {
				this.current = index;
			},
			scrollX() {
			
			},
			selectRank(index){
				if(this.rankIndex != index){
					this.rankIndex = index
				}
			},
			getTimeStamp(time) {
				let timestamp = ''
				let nowTime = parseInt(new Date().getTime() / 1000)
				let endTime = new Date(time).getTime() / 1000
				timestamp = endTime - nowTime
				if (timestamp < 0) {
					timestamp = 0
				}
				return timestamp
			},
			isYou(time){
				let timestamp = ''
				let nowTime = parseInt(new Date().getTime() / 1000)
				let endTime = new Date(time).getTime() / 1000
				timestamp = endTime - nowTime
			//	console.log(nowTime)
			//	console.log(endTime)
				if (timestamp > 0) {
					return true
				}
				return false
			},
			toBid(item){
				uni.navigateTo({
					url:`/pages/secondary/bid/index?work_id=${item.id}`
				})
			},
			toCard(index){
				if(this.bannerList[index].path){
					uni.navigateTo({
						url:this.bannerList[index].path
					})
				}
			},
		
			//切换市场类型
			change(index) {
				this.current = index
			//	this.category_id = this.categoryList[this.current].id
				
				if (this.current > 0) {
					this.gutter = 44
				} else {
					this.gutter = 40
				}
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: space-between;
		.earth-logo{
			width: 64upx;
			height: 64upx;
			margin-left: 30upx;
			margin-right: 4upx;
		}
	}
	.search-wrap {
		width: 57%;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	/* #ifdef H5 */
	/deep/ .u-navbar-inner{
		height: 100upx !important;
	}
	/* #endif */
	
	.content-wrap{
		/* #ifdef APP-PLUS */
			min-height:100vh;
		/* #endif */
		/* #ifdef H5 */
		min-height:calc(100vh - 50px);
		/* #endif */
		width: 100%;
		padding: 0upx 0upx 30upx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FB 100%);
	}
	.content-container{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.swiper-wrap{
		// height: 300upx;
		height: 530upx;
		margin-bottom: 24upx;
		margin-top: calc(0px - var(--percent)) !important;
		box-shadow: 0px 4px 30px -12px rgba(102,105,120,0.5), 0px 4px 12px -6px rgba(154,166,219,0.3);
		/deep/.u-swiper-image>div{
			background-size: 100% 100% !important;
		}
	}
	/deep/ .u-swiper{
		height: 88upx !important;
	}
	.notice-wrap {
		width: 100%;
		// height: 84upx;
		height: 124upx;
		background: #FFFFFF;
		border-radius: 16upx;
		padding: 0 20upx;
		margin-bottom: 24upx;
		box-shadow: 0px 4px 30px -12px rgba(102,105,120,0.2), 0px 4px 12px -6px rgba(154,166,219,0.1);
		.notice-left-icon {
			width: 72upx;
			height: 64upx;
			
			image {
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		}
		.news-more{
			width: 36upx;
			height: 36upx;
		}
		.notice-left-line {
			width: 1px;
			height: 40upx;
			background: #E9ECEF;
			margin: 0 0 0 24upx;
	
		}
		.arrow-icon {
			width: 28upx;
			height: 28upx;
	
			image {
				width: 28upx;
				height: 28upx;
				vertical-align: top;
			}
		}
	}
	.invite-banner{
		width: 100%;
		height: 164upx;
		background: #FFFFFF;
		box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
		border-radius: 16upx;
		margin-bottom: 34upx;
		image{
			width: 100%;
			height: 100%;
			vertical-align: top;
			border-radius: 16upx;
		}
		.invite-btn{
			width: 142upx;
			height: 48upx;
			line-height: 48upx;
			background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
			border-radius: 24upx;
			right:30upx;
			top:36upx;
		}
	}
	.creation-box {
		flex-wrap: wrap;
		box-sizing: border-box;
		padding-top: 30upx;
		.creation-item {
			width: 690upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102, 105, 120, 0.2), 0px 4upx 12upx -6upx rgba(154, 166, 219, 0.1);
			border-radius: 10upx;
			margin-bottom: 24upx;
	
			.creation-cover {
				width: 690upx;
				height: 690upx;
					
				image {
					width: 690upx;
					height: 690upx;
					border-radius: 10upx 10upx 0 0;
				}
			}
					
	
			.sell-over-bg{
				top:24upx;
				left:24upx;
				padding: 0 16upx;
				background: rgba(41,41,64,0.45);
				border-radius: 20upx;
				backdrop-filter: blur(20px);
				line-height: 36upx;
				min-width: 140upx;
				height: 48upx;
				border-radius: 25upx;
				line-height: 48upx;
				.sell-over{
					width: 30upx;
					height: 30upx;
					margin-right: 8upx;
					image{
						width: 30upx;
						height: 30upx;
						vertical-align: top;
					}
				}
			}
			.sell-time-bg{
				background: linear-gradient(143deg, #AD21FF 0%, #009AFF 100%);
			}
			.creation-quantity {
				width: 280upx;
				height: 48upx;
				background: rgba(41, 41, 64, 0.65);
				border-radius: 24upx 24upx 0px 0px;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				backdrop-filter: blur(20px);
				padding: 8upx 0;
				box-sizing: border-box;
			
				
				.line {
					display: block;
					height: 20upx;
					width: 2upx;
					background: #999BA8;
					margin: 0 14upx;
				}
			}
			
			.creation-item-padding {
				padding: 0 12upx;
				box-sizing: border-box;
			}
					
			.creation-item-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-top: 31upx;
				padding-bottom: 18upx;
			}
					
			.creation-item-price {
				line-height: 44upx;
				margin-bottom: 20upx;
			}
		}
	}
	.no-works{
		margin: 50upx auto;
		text-align: center;
		image{
			width: 300upx;
			height: 300upx;
		}
	}
	.text-7B809A{
		color:#7B809A;
	}
	
	.padding-wrap{
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.creation-tab {
		width: 100%;
		/deep/.u-tab-item{
			font-size: 32upx;
			padding: 0 30upx !important;
		}
		
	}
	.downbox{
		position: fixed;
		/* #ifdef APP-PLUS */
			bottom: 30upx;
		/* #endif */
		/* #ifdef H5 */
		bottom: 65px;
		/* #endif */
		width: 480upx;
		height: 98upx;
		background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
		box-shadow: 0px 8px 24px -6px rgba(63,192,254,0.8);
		border-radius: 49upx;
		left:50%;
		transform: translateX(-50%);
		z-index: 14;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>